<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="disabled">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" slot="detail">
        <a-card :bordered="false">
          <a-row>
            <a-col :span="24">
              <div class="tip-title">基础设置:</div>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="登录账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName">
                <a-input v-model="form.userName" :disabled="is_edit" placeholder="请输入登录账号" style="width: 50%"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="!is_edit&&!disabled">
              <a-form-model-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="password">
                <a-input v-model="form.password" type="password" placeholder="请输入登录密码" style="width: 50%"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="排序值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
                <a-input-number v-model="form.sort" placeholder="请输入排序值" style="width: 50%"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="提现手续费比例" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cashRate">
                <a-input-number v-model="form.cashRate" placeholder="请输入提现手续费比例" style="width: 50%"/>
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="24">
            <a-form-model-item label="自动确认收货天数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="confirmDays">
              <a-input-number :min="1" v-model="form.confirmDays" placeholder="请输入自动确认收货天数" style="width: 50%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="运费计算规则" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expressType">
              <j-dict-select-tag v-model="form.expressType" dictCode="express_type" :triggerChange="true" style="width: 50%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="待发货是否退运费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="refundOnWaitingSend">
              <j-dict-select-tag v-model="form.refundOnWaitingSend" dictCode="yn" :triggerChange="true" style="width: 50%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="待收货是否退运费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="refundOnWaitingConfirm">
              <j-dict-select-tag v-model="form.refundOnWaitingConfirm" dictCode="yn" :triggerChange="true" style="width: 50%" />
            </a-form-model-item>
          </a-col> -->

            <a-col :span="24">
              <div class="tip-title">商家信息:</div>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="商铺名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                <a-input v-model="form.name" placeholder="请输入商铺名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="经营类目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryIds">
                <a-select mode="multiple" v-model="form.categoryIds" style="width: 50%">
                  <a-select-option v-for="(item,index) in serviceData" :key="index" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="logo" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="logoUrl">
                <j-image-upload class="avatar-uploader" :accept="'image/png,image/jpeg'" text="上传"
                                v-model="form.logoUrl"></j-image-upload>
                <span>推荐尺寸：500*500像素；小于3M；支持png/jpeg/jpg</span>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="商铺地区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="did">
                <j-area-linkage v-model="form.did" type="cascader" style="width: 50%"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="店铺地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
                <a-input v-model="form.address" placeholder="请输入店铺地址"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <div class="tip-title">店铺管理人信息:</div>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerName">
                <a-input v-model="form.ownerName" placeholder="请输入管理人姓名"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="联系方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerTel">
                <a-input v-model="form.ownerTel" placeholder="请输入管理人联系方式"></a-input>
              </a-form-model-item>
            </a-col>
            <!-- <a-col :span="24">
            <a-form-model-item label="商铺接收发货电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="custodianPhone">
              <a-input v-model="form.shopRemindTel" placeholder="请输入商铺接收发货电话"></a-input>
            </a-form-model-item>
          </a-col> -->

            <a-col :span="24">
              <div class="tip-title">资质信息</div>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="营业执照及其他相关资质" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                 prop="businessLicense">
                <j-image-upload :isMultiple="true" :num="9" class="avatar-uploader" text="上传"
                                v-model="form.businessLicense">
                </j-image-upload>
                <span>(至多9张；支持png/jpeg/jpg)</span>
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-card>
        <footer-tool-bar v-if="!disabled">
          <a-button type="primary" @click="submitForm" :loading="loading">提交</a-button>
        </footer-tool-bar>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import Vue from 'vue'
import {SHOP_TYPE, ORG_CODE} from "@/store/mutation-types"
import {httpAction, getAction} from '@/api/manage'
import pick from 'lodash.pick'
import {validateDuplicateValue} from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDate from '@/components/jeecg/JDate'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import JImageUpload from '@/components/jeecg/JImageUpload'
import JAreaLinkage from '@/components/jeecg/JAreaLinkage'
import FooterToolBar from '@/components/tools/FooterToolBar'

export default {
  name: 'SmsSupplierForm',
  components: {
    JFormContainer,
    JDate,
    JSelectDepart,
    JImageUpload,
    JAreaLinkage,
    FooterToolBar
  },

  data() {
    return {
      //当前用户店铺类型1:平台，2：自营，3：店铺，4：供应商
      shopType: Vue.ls.get(SHOP_TYPE),
      //当前用户部门code
      orgCode: Vue.ls.get(ORG_CODE),
      is_edit: false,
      disabled: false,
      serviceData: [],
      form: {
        id: '',
        did: ''
      },
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      rules: {
        cashRate: [
          {required: true, message: '请输入提现手续费比例!'},
        ],
        // confirmDays: [
        //   { required: true, message: '请输入自动确认收货天数!' },
        // ],
        // expressType: [
        //   { required: true, message: '请选择运费计算规则!' },
        // ],
        // refundOnWaitingSend: [
        //   { required: true, message: '请选择待发货是否退运费!' },
        // ],
        // refundOnWaitingConfirm: [
        //   { required: true, message: '请选择待收货是否退运费!' },
        // ],
        userName: [
          {required: true, message: '请输入登录账号!'},
        ],
        password: [
          {required: true, message: '请输入登录密码!'},
        ],
        categoryIds: [
          {required: true, message: '请选择经营类目!'},
        ],
        name: [
          {required: true, message: '请输入商铺名称!'},
        ],
        logoUrl: [
          {required: true, message: '请输入商铺logo!'},
        ],
        did: [
          {required: true, message: '请选择省市区!'},
        ],
        address: [
          {required: true, message: '请输入店铺地址!'},
        ],

        ownerName: [
          {required: true, message: '请输入管理人姓名!'},
        ],

        ownerTel: [
          {required: true, message: '请输入管理人联系方式!'},
        ],
        businessLicense: [
          // { required: true, message: '请输入营业执照!' },
        ],

      },
      url: {
        oneList: "/mallBase/smsServiceCategory/oneList",
        add: "/mallBase/smsSupplier/addSupplier",
        edit: "/mallBase/smsSupplier/edit",
        queryById: "/mallBase/smsSupplier/queryById"
      }
    }
  },
  computed: {},
  created() {
    this.loadServiceCategory()
    if (this.$route.query.disabled) {
      this.disabled = this.$route.query.disabled == "true" ? true : false
    }
    if (this.$route.query.id) {
      this.is_edit = true
      this.form.id = this.$route.query.id
      this.loadInfo()
    } else if (this.shopType == 4 && this.orgCode) {
      this.disabled = true
      this.form.id = this.orgCode
      this.loadInfo()
    }
  },
  methods: {
    loadServiceCategory() {
      getAction(this.url.oneList, {pid: ''}).then(res => {
        if (res.success) {
          this.serviceData = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },

    loadInfo() {
      const self = this
      getAction(this.url.queryById, {
        id: self.form.id
      }).then(res => {
        res.result['did'] = res.result['did'] + ''
        if (res.result.categoryIds) {
          res.result.categoryIds = res.result.categoryIds.split(",")
        }
        self.form = res.result
      })
    },

    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.is_edit) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign({}, this.form)
          if (formData['did']) {
            formData['pid'] = formData['did'].substring(0, 2) + "0000"
            formData['cid'] = formData['did'].substring(0, 4) + "00"
          }
          if (formData['comDid']) {
            formData['comPid'] = formData['comDid'].substring(0, 2) + "0000"
            formData['comCid'] = formData['comDid'].substring(0, 4) + "00"
          }
          if (formData.categoryIds && Array.isArray(formData.categoryIds)) {
            formData.categoryIds = formData.categoryIds.join(',')
          }

          console.log("表单提交数据", formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$router.go(-1)
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        } else {
          console.log(valid)
        }

      })
    },

  }
}
</script>
